<template>
  <a-layout id="components-layout-demo-top-side-2" style="height:100%;">
    <a-layout-header class="header">
      <div class="logo" />
      <a-icon
          class="trigger"
          style="float:left;color:white"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="()=> collapsed = !collapsed"
        />
        <!-- 一级导航 -->
      <div style="display:flex">     
      <a-tabs  @change="callback" style="color:white;flex:1;">
        <a-tab-pane v-for='(item,index) in topNav' :key=index  :tab=item.name></a-tab-pane>
      </a-tabs>
      <div style="color:white;min-width:300px">
            <a-dropdown >
                <a class="ant-dropdown-link" href="#" style="color:white">
                    <a-icon type="user" />
                打怪兽的喵<a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                <a-menu-item >
                    <a href="javascript:;">个人中心</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">修改密码</a>
                </a-menu-item>
                </a-menu>
            </a-dropdown>
            <a-divider type="vertical" />
            <a-dropdown :trigger="['click']">
                <a class="ant-dropdown-link" href="#" style="color:white">
                    <a-icon type="global" />
                语言<a-icon type="down" />
                </a>
                <a-menu slot="overlay" @click="language">
                <a-menu-item>
                    <a href="javascript:;">简体中文</a>
                </a-menu-item>
                <a-menu-item>
                    <a href="javascript:;">English</a>
                </a-menu-item>
                </a-menu>
            </a-dropdown>            
            <a-divider type="vertical" />
            <a-dropdown>
                <a class="ant-dropdown-link" href="#" style="color:white">
                    <a-icon type="star" />
                主题<a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                <a-menu-item v-for='item in colorList' :key='item.id'>
                    <a href="javascript:;" :style="'color:'+item.eng" @click="theam(item.eng)">
                      <a-icon type="star" />
                      <a-divider type="vertical" />
                      {{item.color}}
                    </a>
                </a-menu-item>
                </a-menu>
            </a-dropdown>
            <a-divider type="vertical" />
            <span style="cursor:pointer">
              <a-icon type="poweroff" />            
              退出
            </span>
      </div>
      </div>
    </a-layout-header>
    <!-- 左侧导航栏 -->
    <a-layout v-show='leftNav'>
      <a-layout-sider width="200" style="background: #fff;overflow-x:hidden" :trigger="null"
      collapsible
      breakpoint='lg'
      v-model="collapsed">

          <a-menu
          mode="inline"
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
          :inlineCollapsed="collapsed"
        >
        <!-- 二三级菜单 -->
          <template v-for='(item,index) in newShow.children'>
          <a-menu-item v-if=!item.children :key=index>
            <a-icon type="pie-chart" />
            <span @click="routerPush(item.path)">{{item.name}}</span>
          </a-menu-item>
          <template v-else>
          <a-sub-menu >
            <span slot="title"><a-icon type="user" />{{item.name}}</span>
            <a-menu-item v-for='itemchild in item.children' :key=itemchild.id @click="routerPush(itemchild.path)">{{itemchild.name}}</a-menu-item>
          </a-sub-menu>
           </template>
          </template>
        </a-menu>

      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>List</a-breadcrumb-item>
          <a-breadcrumb-item>App</a-breadcrumb-item>
        </a-breadcrumb>
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <!-- Content  {{$t('dashboard3')}}  {{count}} -->
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      collapsed: false,
      screenWidth:document.body.clientWidth,
      leftNav:1,
      colorList:[
        {color:'标准',eng:'#001529'},
        {color:'红色',eng:'red'},
        {color:'蓝色',eng:'blue'},
        {color:'粉色',eng:'pink'},
      ],
      leftRouter:JSON.parse(localStorage.getItem('router')) || this.$router.options.routes[0].children,
      newShow:[],
    }
  },
  created() {
      // 获取当前浏览器的地址
      // console.log(this.$route.path)
      // console.log(this.$router.options.routes)//路由
      this.$store.commit('topNav',this.$router.options.routes)
      // console.log(this.leftRouter)
      if(this.screenWidth<768){
            this.leftNav=0
          }
      // 初始化菜单
      this.newShow=JSON.parse(localStorage.getItem('topNav')) || this.$router.options.routes[0]
  },
  computed: {
        ...mapState({
            count: state=>state.topNav.count
        }),
        ...mapState({
            topNav: state=>state.topNav.topNav
        }),
    },
  methods: {
    callback (key) {
      // console.log(this.topNav[key])
      this.newShow=this.topNav[key]
      localStorage.setItem('topNav',JSON.stringify(this.topNav[key]))
      if(!this.topNav[key].children){
        this.$router.push(this.topNav[key].path)//一级菜单
      }else if(!this.topNav[key].children[0].children){
        this.$router.push(this.topNav[key].children[0].path)//二级菜单
      }else{
        this.$router.push(this.topNav[key].children[0].children[0].path)//二级菜单
      }
    },
    // 主题颜色
    theam(val){
      localStorage.setItem('theam',val)
      const headColor=document.querySelector('.ant-layout-header')
      headColor.style.background=val
    },
    language({ key }){      
      if(key=='item_0'){         
        this.$i18n.locale = 'zh'; 
        localStorage.setItem('lang','zh')
      }else{
        this.$i18n.locale = 'en';
        localStorage.setItem('lang','en')
      }
    },
    // 页面跳转
    routerPush(val){
      console.log(val)
      this.$router.push(val )
    }
  }, 
  mounted() {
    // 初始化主题颜色
    const headColor=document.querySelector('.ant-layout-header')
    // headColor.style.background=localStorage.getItem('theam')
      // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
        if(this.screenWidth<768){
          this.leftNav=0
        }else{
          this.leftNav=1
        }
      })()
    }
  },
}
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255,255,255,.2);
  margin: 16px 28px 16px 0;
  float: left;
}
#components-layout-demo-top-side-2 .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-top-side-2 .trigger:hover {
  color: #dbe7f3;
}
.ant-tabs-nav .ant-tabs-tab-active{
    color:yellow !important
}
/* 一级导航样式 */
.ant-tabs-nav-container{
    font-size: 17px;
    line-height: 2.5;
}
/* 头部的内边距 */
.ant-layout-header{
    padding:0 10px 0 50px;
}
/* 小屏左右切换按钮 */
.ant-tabs-tab-prev, .ant-tabs-tab-next{
    color: white !important;
}
/* 下拉框位置 */
.ant-dropdown{
  top:66px !important;
}
</style>
